class Depend{
    constructor(){
        this.reactiveFns = []
    }
    addDepend(reactiveFn){
        this.reactiveFns.push(reactiveFn)
    }

    notify(){
        this.reactiveFns.forEach(fn=>{
            fn()
        })
    }
}






//封装一个响应式的函数
const depend = new Depend()
function watchFn(fn){
    depend.addDepend(fn)
}

//对象的响应式
const obj ={
    name:"why",
    age:18
}

//监听对象的属性变量：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj,{
    get:function (target,key,receiver) {
        return Reflect.get(target,key,receiver)
    },
    set:function (target,key,newValue,receiver) {
        Reflect.set(target,key,newValue,receiver)
        depend.notify()
    }
}
)


watchFn(
    function foo(){
        const newName = objProxy.name
        console.log("你好，scott")
        console.log("Hello World")
        console.log(objProxy.name,'---foo') // 100行
    }
)
watchFn(function demo() {
    console.log(objProxy.name,'---demo')
})

watchFn(function () {
    console.log(objProxy.age,"age发生变化是需要执行的-----1")
})

watchFn(function () {
    console.log(objProxy.age,"age发生变化是需要执行的-----2")
})

objProxy.name = "kobe"
objProxy.name = "scott"
objProxy.name = "curry"

objProxy.age = 11
